app/pages/poc/[id].vue

<template>
  <main>
    <p>Edit :{{ file }}</p>

    <form @submit.prevent="" class="my-3">
      <input v-model="file.name" type="text" />

      <select v-model="file.status">
        <option value="PENDING">Pending</option>
        <option value="READY">Ready</option>
        <option value="DELETED">Deleted</option>
        <option value="ERROR">Error</option>
      </select>

      <button @click="cancelAndGoBack">Annuler</button>
      <button type="submit" value="Enregistrer" @click="save">Enregistrer</button>

      <button type="submit" value="Supprimer" @click="deleteAndGoBack" class="mt-5">Supprimer</button>
    </form>
  </main>
</template>

<script setup lang="ts">
import {useEntityManager} from "~/composables/data/useEntityManager";
import {ref, Ref} from "@vue/reactivity";
import ApiResource from "~/models/ApiResource";
import {File} from "~/models/Core/File";

const route = useRoute()

const id: Ref<number> = ref(parseInt(route.params.id as string))

const em = useEntityManager()
//@ts-ignore
let file: ApiResource = reactive(await em.fetch(File, id.value))

const save = async () => {
  console.log('save')
  //@ts-ignore
  await em.persist(File, file)
  navigateTo('/poc')
}

const cancelAndGoBack = async () => {
  if (em.isNewEntity(File, id.value)) {
    await em.delete(File, file)
  } else {
    em.reset(File, file)
  }
  navigateTo('/poc')
}

const deleteAndGoBack = async () => {
  await em.delete(File, file)
  navigateTo('/poc')
}

</script>

<style>
a {
  color: blue;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}

button {
  border: grey solid 1px;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}
button:hover {
  text-decoration: underline;
}
button:focus {
  background-color: lightgrey;
}

form {
  display: flex;
  flex-direction: column;
  max-width: 500px;
}
</style>